<template>
  <div class="selecter">
    <div class="inner" v-if="brands">
      <!-- 品牌 -->
      <span class="name">品牌：</span>
      <p class="values">
        <span class="item">{{brandNames}}</span>
      </p>
      <i class="btn-close el-icon-circle-close" @click="delectBrand"></i>
    </div>
    <!-- 分类属性 -->
    <div class="inner" v-else>
      <span class="name">{{key}}：</span>
      <p class="values">
        <span class="item">{{values}}</span>
      </p>
      <i class="btn-close el-icon-circle-close" @click="delectAttr"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    brands: {
      type: Array
    },
    cateId: { // 分类id
      type: [Number, String]
    },
    attrKey: { // 属性名id
      type: [Number, String]
    },
    attrVal: { // 属性值id
      type: [Array, Object]
    }
  },
  data () {
    return {
      categoryList: JSON.parse(window.localStorage.getItem('categoryList')), // 分类列表
      key: '', // 标题
      values: [], // 内容
      brandNames: [] // 品牌
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.key = ''
      this.values = []
      // 设置属性名
      this.categoryList.forEach(cate => {
        if (cate.categoryId === Number(this.cateId)) {
          cate.categoryAttribute.forEach(attr => {
            if (attr.parentAttribute.attributeId === Number(this.attrKey)) {
              this.key = attr.parentAttribute.value
            }
          })
        }
      })
      // 判断属性值是否多选并设置
      if (this.attrVal) {
        if (Array.isArray(this.attrVal)) {
          this.attrVal.forEach(item => {
            this.values.push(item.attrName)
          })
          this.values = this.values.toString()
        } else {
          this.values = this.attrVal.attrName
        }
      }
      // 判断是否有品牌
      if (this.brands && this.brands.length) {
        let names = []
        this.brands.forEach(brand => {
          names.push(brand.brandName)
        })
        this.brandNames = names.toString()
      }
    },
    // 清除品牌筛选
    delectBrand () {
      this.$emit('clear-brand', this.brands)
    },
    // 清楚分类筛选
    delectAttr () {
      this.$emit('clear-attr', this.attrKey)
    }
  },
  watch: {
    'cateId': function () {
      this.init()
    },
    'attrKey': function () {
      this.init()
    },
    'attrVal': {
      handler: function () {
        this.init()
      },
      deep: true
    },
    'brands': {
      handler: function () {
        this.init()
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.selecter {
  position: relative;
  top: -1px;
  height: 26px;
  background: #ffffff;
  border: solid 1px hsl(0, 0%, 80%);
  overflow: hidden;
  cursor: pointer;
  .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
    max-width: 165px;
    height: 100%;
    &:hover {
      border-color: $green;
      .btn-close {
        color: $green;
      }
    }
    .name {
      font-size: $fz_14;
    }
    .values {
      flex: 1;
      color: $green;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .btn-close {
      margin-left: 10px;
      color: #cccccc;
    }
  }
}
</style>
